<template>
  <div>
    <!--查询-->
    <el-form :inline="true" :model="Cha" class="demo-form-inline">
      <el-form-item label="外协单位名称">
        <el-input
          v-model="Cha.w_danweiname"
          placeholder="请输入外协单位名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="Cha.w_phone" placeholder="请输入手机号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="Chawaixiepage">查询</el-button>
      </el-form-item>
      <el-button type="success" @click="Waiadd()">新增</el-button>
      <el-button type="success" @click="Waipidelete()">批删</el-button>
    </el-form>
    <el-table ref="waixieref" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="外协单位名称" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.w_danweiname }}</span>
        </template>
      </el-table-column>

      <el-table-column label="邮箱" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.w_email }}</span>
        </template>
      </el-table-column>

      <el-table-column label="固化" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.w_guphone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="手机号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.w_phone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="外协地址" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.w_dizhi }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.creationTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="Cha.page"
      :limit.sync="Cha.maxResultCount"
      :pageSizes="[2, 4, 6, 8]"
      @pagination="WaixiePage"
    />
    <!--外协添加弹出框-->
    <el-dialog title="提示" :visible.sync="WaixieAddShow" width="30%">
      <el-form ref="form" :model="WaixieList" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="外协单位名称">
              <el-input v-model="WaixieList.w_danweiname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="WaixieList.w_email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="固话">
              <el-input v-model="WaixieList.w_guphone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="WaixieList.w_phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="外协地址">
              <el-input v-model="WaixieList.w_dizhi"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-form-item>
    <el-button type="primary" @click="WaixieBao">保存</el-button>
    <el-button @click="Miss()">取消</el-button>
  </el-form-item>
      </el-form>
    </el-dialog>
    <!--外协编辑-->
    <el-dialog title="提示" :visible.sync="WaixieEintShow" width="30%">
      <el-form ref="form" :model="EintTable" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="外协单位名称">
              <el-input v-model="EintTable.w_danweiname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="EintTable.w_email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="固话">
              <el-input v-model="EintTable.w_guphone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="EintTable.w_phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="外协地址">
              <el-input v-model="EintTable.w_dizhi"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-form-item>
    <el-button type="primary" @click="EintBao()">保存</el-button>
    <el-button @click="EintMiss()">取消</el-button>
  </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  WaixiePages, //显示
  handleDeletes, //单删
  WaixieBaos,//添加
  Waipideletes,//批删
  handleEdits,//修改反填
  EintBaos,//保存
} from "@/api/system_base/CheliangApi"; //引入apijs
import Pagination from "@/components/Pagination"; // 引入分页组件
export default {
  components: { Pagination },
  data() {
    return {
      WaixieEintShow:false,
      WaixieAddShow: false,
      total: 0,
      EintTable:[],
      tableData: [],
      Cha: {
        w_danweiname: "",
        w_phone: "",
        page: 1, //当前页
        maxResultCount: 2, //每页几条
        skipCount: 0, //用于api接口  第一条数据位置
      },
      WaixieList: {
        w_danweiname:"",
        w_email:"",
        w_guphone:"",
        w_phone:"",
        w_dizhi:"",
      },
    };
  },
  created() {
    this.WaixiePage();
  },
  methods: {
    //修改保存
    EintBao(){
      if(this.EintTable.w_danweiname=="")
      {
        this.$message("外协单位名称不能为空");
        return;
      }
       var email=/^\w[-\w.+]*@([A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
      if(this.EintTable.w_email==""||!email.test(this.EintTable.w_email))
      {
        this.$message("邮箱不能为空或者邮箱格式不正确");
         return;
      }
      if(this.EintTable.w_guphone=="")
      {
        this.$message("固话不能为空");
         return;
      }
      
      var phone = /^1[3|4|5|7|8][0-9]{9}$/; 
      if(this.EintTable.w_phone==""||!phone.test(this.EintTable.w_phone))
      {
        this.$message("手机号不能为空或者手机号格式不正确");
         return;
      }
      if(this.EintTable.w_dizhi=="")
      {
        this.$message("外协地址不能为空");
         return;
      }
      EintBaos(this.EintTable).then(
        (r)=>{
          this.$message("修改成功");
          this.WaixieEintShow=false;
          this.WaixiePage();
        }
      )
    },
    EintMiss(){
      this.WaixieEintShow=false;
    },
      //添加保存
      WaixieBao(){
        if(this.WaixieList.w_danweiname=="")
        {
          this.$message("外协单位名称不能为空");
          return;
        }
        var email=/^\w[-\w.+]*@([A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
         if(this.WaixieList.w_email==""||!email.test(this.WaixieList.w_email))
        {
          this.$message("邮箱不能为空或格式不正确");
          return;
        }
         if(this.WaixieList.w_guphone=="")
        {
          this.$message("固话不能为空");
          return;
        }
        var phone = /^1[3|4|5|7|8][0-9]{9}$/; 
         if(this.WaixieList.w_phone==""||!phone.test(this.WaixieList.w_phone))
        {
          this.$message("手机号不能为空或者格式不正确");
          return;
        }
         if(this.WaixieList.w_dizhi=="")
        {
          this.$message("外协地址不能为空");
          return;
        }
        WaixieBaos(this.WaixieList).then(
          (r)=>{
            this.$message("保存成功");
            this.WaixieAddShow=false;
            this.WaixiePage();
          }
        )
      },
      Miss(){
          this.WaixieAddShow=false;
      },
    //外协批删
    Waipidelete() {
      var arrid=[];
      var id=this.$refs.waixieref.selection;
      id.forEach((r)=>{
        arrid.push(r.id);
      })
      if(confirm("确认删除吗"))
      {
        
        arrid.forEach((r)=>{
          Waipideletes(r).then(
          (r)=>{
           
          }
        )
         this.$message("批删成功");
            this.WaixiePage();
        })
      }
    },
    //外协添加
    Waiadd() {
      this.WaixieAddShow = true;
    },
    //查询
    WaixiePage() {
      this.listLoading = true;
      this.Cha.skipCount = (this.Cha.page - 1) * this.Cha.maxResultCount;
      WaixiePages(this.Cha).then((r) => {
        if (r.result.items != null) {
          var that = this;
          that.tableData = r.result.items;
          this.listLoading = false; // 隐藏加载效果
          this.total = r.result.totalCount;
        }
      });
    },
    Chawaixiepage() {
      this.Cha.page = 1;
      this.WaixiePage();
    },
    //编辑
    handleEdit(id) {
      
      handleEdits(id).then(
        (r)=>{
          
            var that=this;
            that.EintTable=r.result;
          
        }
      )
      this.WaixieEintShow=true;
    },
    //单删
    handleDelete(id) {
      if (confirm("确认删除吗")) {
        handleDeletes(id).then((r) => {
          this.$message("删除成功");
          this.WaixiePage();
        });
      }
    },
  },
};
</script>